<template>
    <div id="home_footer">

        <nav class="mui-bar mui-bar-tab" style="border-top: 1px solid #d6d7dc">

            <a class="mui-tab-item bottom_nav_active"   @tap="change_nav(k,i.href)" v-for="(i,k) in $store.state.home_status.home_footer_nav" :key="k" >
                <span class="mui-icon ">
                    <div :class="k == $store.state.home_status.home_footer_nav_index ? i.icon2 : i.icon1"></div>	
                    <!-- <img src="../assets/images/home_footer/a1.png" width="19px;" alt=""> -->
                </span>
                <span class="mui-tab-label" :style="k == $store.state.home_status.home_footer_nav_index?'color:#1c83fc':'color: #888888;'">{{i.name}}</span>
            </a>
 
        </nav>

    </div>
</template>
<script>
export default {
  name: "home_footer",
  data() {
    return {
   
    };
  },
  created() {},
  methods: {
    change_nav(k, v) {
      this.$store.commit("change_home_nav",k)
      // change_shop_page(state,name,page_name) 状态管理-->切换首页页面  name-->头部文字   page_name-->页面组件名称
      if (k == 0) {
        //社区首页
        this.$store.commit("change_home_page",{
          title:"社区首页",
          page_name:"Home"
        })
      } else if (k == 1) {
        // 社区广场
        this.$store.commit("change_home_page",{
          title:"社区广场",
          page_name:"Square"
        })
      } else if (k == 3) {
        // 个人中心=
        this.$store.commit("change_home_page",{
          title:"个人中心",
          page_name:"MyPage"
        })
      } else {
        // 社区商城
        this.$router.push("/shop")
      }
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../static/pxvalue.less";
.icon_img {
  width: @p50;
  height: @p50;
  display: inline-block;

  background-size: 100% 100%;
}
.icon_img_a1 {
  background-image: url(../assets/images/home_footer/a1.png);
}
.icon_img_a2 {
  background-image: url(../assets/images/home_footer/a2.png);
}

.icon_img_b1 {
  background-image: url(../assets/images/home_footer/b1.png);
}
.icon_img_b2 {
  background-image: url(../assets/images/home_footer/b2.png);
}

.icon_img_c1 {
  background-image: url(../assets/images/home_footer/c1.png);
}
.icon_img_c2 {
  background-image: url(../assets/images/home_footer/c1.png);
}
.icon_img_d1 {
  background-image: url(../assets/images/home_footer/d1.png);
}
.icon_img_d2 {
  background-image: url(../assets/images/home_footer/d2.png);
}
</style>

